<template>
	<div style="padding-bottom: 100px;">
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules"  labelWidth="90px">
				<uni-forms-item label="人员名称" name="userName" required>
					<uni-easyinput type="text" v-model="formData.userName" placeholder="请输入人员名称" />
				</uni-forms-item>
				<uni-forms-item label="所在部门" name="deptId" required>
					<uni-data-select v-model="formData.deptId" :localdata="deptId" style="background-color: white;" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex" required>
					<uni-data-checkbox v-model="formData.sex" :localdata="sex" />
				</uni-forms-item>
				<!-- <uni-forms-item label="联系电话">
					<uni-easyinput type="number" v-model="formData.phonenumber" placeholder="请输入联系电话" />
				</uni-forms-item> -->
				<uni-forms-item label="电子邮箱">
					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入电子邮箱" />
				</uni-forms-item>
				<!-- <uni-forms-item label="所在地址" name="address" required>
					<uni-data-picker placeholder="请选择地址" popup-title="请选择所在地区" :localdata="dataTree"
						style="background-color: white;" v-model="formData.address">
					</uni-data-picker>
					<view style="margin-top: 20px;">
						<uni-easyinput  type="text"
							v-model="formData.addressDetail" placeholder="请输入详细地址" />
					</view>
				</uni-forms-item> -->
				<uni-forms-item label="手机账号" name="phonenumber" required>
					<uni-easyinput type="number" v-model="formData.phonenumber" placeholder="请输入手机账号" />
				</uni-forms-item>
				<uni-forms-item v-if="userId==''" label="账号密码" name="password" required>
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入账号密码" />
				</uni-forms-item>
				<uni-forms-item label="岗位">
					<view style="margin-top: 5px;">
						<uni-data-checkbox multiple  v-model="formData.postIds" :localdata="postRange"></uni-data-checkbox>
					</view>
				</uni-forms-item>
				<uni-forms-item label="角色范围" name="roleIds" required>
					<!-- <uni-data-select v-model="formData.roleRange" :localdata="roleRange" style="background-color: white;" /> -->
					<view style="margin-top: 5px;">
						<uni-data-checkbox multiple  v-model="formData.roleIds" :localdata="roleRange"></uni-data-checkbox>
					</view>
				</uni-forms-item>
				<uni-forms-item label="状态" name="status" required>
					<!-- <uni-data-select v-model="formData.status" :localdata="state" style="background-color: white;" /> -->
					<uni-data-checkbox v-model="formData.status" :localdata="state" />
				</uni-forms-item>
				<uni-forms-item label="备注">
					<uni-easyinput type="textarea" v-model="formData.remark" placeholder="人员相关备注说明" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view
			style="background-color: #ffffff;z-index: 3;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
			<view
				style="display: flex;align-items: center;width: 100%;height: 60px;justify-content: center;">
				<view v-if="userId==''" @click="submit()" hover-class="buttonHover"
					style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
					确定新增</view>
				<view v-else @click="submit_update()" hover-class="buttonHover"
					style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
					保存</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {getAccountDetails,getPostList,getRoleList, updateAccountProfile,addAccount} from '@/api/system/account.js'
	import {getDeptList} from '@/api/system/project.js'
	import {getDicts,getAllAddressTree} from '@/api/system/dict.js'
	export default {
		data() {
			return {
				formData: {
					userName: '',
					deptId: '',
					sex: '',
					email:'',
					phonenumber: '',
					postIds:[],
					roleIds:[],
					status:'0',
					remark:''
				},
				// 校验规则
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入人员名称',
						}]
					},
					deptId: {
						rules: [{
							required: true,
							errorMessage: '请选择所在部门',
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					phonenumber: {
						rules: [{
							required: true,
							errorMessage: '请输入手机账号',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '手机格式不正确'
						}
						]
					},
					roleIds: {
						rules: [{
							required: true,
							errorMessage: '请至少选择1个角色',
						}]
					},
					status: {
						rules: [{
							required: true,
							errorMessage: '请选择状态',
						}]
					}
				},
				//下拉框 ->所在部门
				deptId: [],
				// 性别->单选数据源
				sex: [],
				//地区下拉框
				dataTree: [],
				//下拉框 ->岗位
				postRange:[],
				//下拉框 ->角色范围
				roleRange: [],
				//下拉框 ->状态
				state: [
					{
						value:'0',
						text:'正常'
					},
					{
						value:'1',
						text:'停用'
					}
				],
				userId:''
			}
		},
		onLoad(e) {
			if (e.userId) {
				//设置顶部导航栏标题
				uni.setNavigationBarTitle({
					title: '编辑账号'
				})
				uni.showLoading({
					title: '正在加载',
				})
				this.userId = e.userId
				//获取用户账号详情
				getAccountDetails(e.userId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.formData = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		},
		created(){
			getDeptList().then(res=>{
				this.deptId=res.data.map(item=>{
					return {
						value:parseInt(item.deptId),
						text:'【'+(item.deptType==='3'?'部门':'网点')+'】'+item.deptName
					}
				})
			})
			//获取性别下拉框
			getDicts('sys_user_sex').then(res=>{
				this.sex=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			//获取岗位列表
			getPostList({pageNum:1,pageSize:1000}).then(res=>{
				this.postRange=res.rows.map(item=>{
					return {
						value:item.postId,
						text:item.postName,
						disable: item.postName=='超级管理员'?true:false
					}
				})
			})
			//获取角色列表
			getRoleList({pageNum:1,pageSize:1000}).then(res=>{
				this.roleRange=res.rows.map(item=>{
					return {
						value:item.roleId,
						text:item.roleName,
						disable: item.roleName=='超级管理员'||item.roleName=='司机'?true:false
					}
				})
			})
		},
		methods:{
			//提交新增账号
			submit() {
				this.$refs.form.validate().then(res => {
					if(!this.formData.password)
					{
						uni.showToast({
							title: '账号密码不能为空',
							icon:'none'
						})
						return
					}
					uni.showLoading({
						title: '正在提交...',
					})
					addAccount(this.formData).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.otherFun() // 給上一頁綁定方法otherFun,傳參0（tabIndex：0）
							uni.navigateBack({
								delta: 1 // 可以不傳delta值，默認為1
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
			//修改账号信息
			submit_update() {
				this.$refs.form.validate().then(res => {
					// if(!mainDriver)
					// {
					// 	uni.showToast({
					// 		title: '请在【关联司机】中设置一名主驾',
					// 		icon:'none'
					// 	})
					// 	return
					// }
					uni.showLoading({
						title: '正在提交...',
					})
					updateAccountProfile(this.formData).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.otherFun() // 給上一頁綁定方法otherFun,傳參0（tabIndex：0）
							setTimeout(() => {
								uni.navigateBack({
									delta: 1 // 可以不傳delta值，默認為1
								})
							}, 1000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style scoped>
	::v-deep .file-title[data-v-363ace0e] {
		font-size: 12px;
		color: #333;
	}
	.buttonHover {
		opacity: 0.6;
	}
</style>